<template>
  <!-- 左侧导航栏菜单 2023年6月26日11点36分 -->

  <el-container style=" ">
    <el-aside style="width:230px;height: 100vh;background:rgb(48, 65, 86);text-align:left" >
      <!-- <side-menu :menuList="menuList" style="background:rgb(48, 65, 86);font-color: rgb(191, 203, 217);" ></side-menu>
    </el-aside> -->
          <div style="background:rgb(48, 65, 86);width:230px;height:80px">
              <div><span style=" line-height: 1.5;"><img src="@/assets/logo.png" style="width:40px">教育后台管理系统</span></div>
          </div>
          <div style="background:rgb(48, 65, 86)">
          <el-menu class="el-menu-vertical-demo" router style="margin-top:30px;background:rgb(48, 65, 86);border-radius:none;">
              <div v-for="item in menuList" :key="item.id">
              <div v-if="item.path">
                <el-menu-item :index="item.path" style="width:230px">
                  <i :class="item.icon" style="color:rgb(191, 203, 217)"></i>`  
                  <span slot="title" style="color:rgb(191, 203, 217)">{{item.menuName}}</span>
                </el-menu-item>
              </div>
              <div v-else>
                <el-submenu :index="item.id+'' " style="width:230px">
                  <template slot="title">
                    <i :class="item.icon" style="color:rgb(191, 203, 217)"></i>
                    <span slot="title" style="color:rgb(191, 203, 217)">{{item.menuName}}</span>
                  </template>
                  <div v-for="subItem in item.children" :key="subItem.id">
                    <el-menu-item :index="subItem.path" style="width:230px">
                      <i :class="subItem.icon" style="color:rgb(191, 203, 217)"></i>
                      <span slot="title" style="color:rgb(191, 203, 217)"> {{subItem.menuName}}</span>
                    </el-menu-item>
                  </div>
                </el-submenu>
              </div>
            </div>
          </el-menu>
          </div>
        </el-aside>
    <el-container>
      <el-header style="text-align:left; font-size: 12px;background:#fff;border-bottom: 1px solid #d8dce5;-webkit-box-shadow: 0 1px 3px 0 rgba(0,0,0,.12),0 0 3px 0 rgba(0,0,0,.04);">
        <div style="width:80%;float:left">
          <el-breadcrumb separator="/" style="display: inline-block;margin-left: 10px;">
            <el-breadcrumb-item :to="'/'">首页</el-breadcrumb-item>
            <el-breadcrumb-item v-if="parentName!=''">{{parentName}}</el-breadcrumb-item>
            <el-breadcrumb-item v-if="currentPathName!=undefined">{{ currentPathName }}</el-breadcrumb-item>
          </el-breadcrumb>
        </div>

        <div class="div2" style="float:right;width:110px;margin-left: 10px;">
          <el-dropdown>
            <span class="el-dropdown-link">个人账号</span><i class="el-icon-arrow-down el-icon--right"></i>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>账号：{{ userLoginName }}</el-dropdown-item>
              <el-dropdown-item @click.native="quit"> 退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>

      </el-header>

      <el-main style="background:#fff">
        <router-view />
      </el-main>
    </el-container>
  </el-container>
</template>
  
  <script>
import SideMenu from "@/views/system/menu/SideMenu.vue";
import axios from "axios";

export default {
  components: {
    SideMenu,
  },
  computed: {
    currentPathName() {
      return this.$store.state.currentPathName;
    },
    parentName() {
      return this.$store.state.parentName;
    },
  },
  watch: {
    //百度搜索出的结果：监听路由变化
    currentPathName(newVal, oldVal) {
      // console.log(newVal);
    },
    parentName(newVal, oldVal) {
      // console.log(newVal);
    },
  },
  data() {
    return {
      // 左侧菜单栏数据

      menuList: [],
      // 获取登陆账号
      userLoginName: "",
    };
  },
  //页面进入执行
  mounted() {
    this.userLoginName = window.sessionStorage.getItem("userLoginName");
    this.query();
    console.log(this.userLoginName);
    // this.userName = window.sessionStorage.getItem('userName')
    // console.log(111)
    // console.log(this.userName)
  },
  methods: {
    //查询左侧菜单栏
    query() {
      axios
        .get(
          "http://localhost:8088/Menu/SysMenuList?userLoginName=" +
            this.userLoginName
        )
        .then((res) => {
          this.menuList = res.data.data;
          console.log(this.menuList)
        });
    },
    quit() {
      this.$message("退出登录成功");
      window.sessionStorage.clear();
      this.$router.push("/");
      this.updateToken();
    },
    updateToken() {
      var token = sessionStorage.getItem("token");
      if (token == null) {
        this.disPlay = false;
      } else {
        this.disPlay = true;
      }
    },
  },
};
</script>
  
  
  <style>
.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  line-height: 200px;
}
.el-aside::-webkit-scrollbar {
  display: none;
}
.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  /* line-height: 160px; */
  /* margin: 0 auto; */
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}
.logos {
  float: left;
  height: 60px;
  width: 60px;
  margin-left: 75px;
}
.div1 {
  float: left;
  width: 400px;
  height: 60px;
  margin-left: 560px;
}
.ffjy {
  font-size: 25px;
  font: bold;
  font-weight: 700;
}
.div2 {
  float: left;
  width: 80px;
  height: 60px;
  margin-left: 500px;
}
.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.div4 {
  width: 80px;
  height: 40px;
  float: right;
  margin-top: 1px;
  margin-right: 108px;
  font-size: 16px;
}
</style>